<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#test1").text(function(i,origText){
                    return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
                });
            });

            $("#btn2").click(function(){
                $("#test2").html(function(i,origText){
                    return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
                });
            });

        });
    </script>
    <title>回调函数</title>
</head>

<body>
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>
</html>